<template>
  <div id="user">
    <user-template>
      <div class="scroll" ref="scroll" @scroll="getScroll">
        <div class="scroll-list">
          <div v-show="!isRead">
            <blog-list class="blog-list" @readMore="readMoreEvent"/>
          </div>
          <div v-show="isRead">
            <detail-body class="detail-body" ref="detail"/>
          </div>
        </div>
      </div>
      <span class="back-top" @click="backTop">
        <img :src="backTopIcon" alt=""/>
      </span>
    </user-template>
  </div>
</template>

<script>
import BlogList from "@/components/blog/blogs/BlogList";
import DetailBody from "@/components/blog/blogDetail/DetailBody";
import Scroll from "@/components/user/userEdit/Scroll";
import UserTemplate from "@/components/user/template/UserTemplate";

import {auth} from "@/network/userRequest";

import backTopIcon from "@/assets/icon/backtop.png";

export default {
  name: "User",
  components: {
    UserTemplate,
    Scroll,
    DetailBody,
    BlogList
  },
  data() {
    return {
      backTopIcon
    }
  },
  computed: {
    isRead() {
      const path = this.$route.path;
      if(path === "/user/blog/edit") {
        return false;
      }
      return true;
    }
  },
  methods: {
    readMoreEvent(id) {
      this.$router.push("/user/blog/" + id);
      this.$refs.detail.getBlogById(id);
    },
    getScroll() {
      const backTop = document.getElementsByClassName("back-top");
      if(this.$refs.scroll.scrollTop < 2000) {
        backTop[0].style.display = "none";
      }else {
        backTop[0].style.display = "block";
      }
    },
    backTop() {
      this.$refs.scroll.scrollTop = 0;
    }
  },
  created() {
    auth();
  }
}
</script>

<style scoped>
  #user {
    height: 100%;
  }

  .scroll {
    overflow: auto;
    position: absolute;
    top: 50px;
    left: 30%;
    width: 70%;
    height: 95%;
  }

  .scroll-list {
    width: 70%;
    margin-top: 10px;
    margin-bottom: 90px;
  }

  #user .back-top {
    display: none;
    position: absolute;
    top: 90%;
    left: 90%;
    width: 30px;
    height: 30px;
  }

  #user .back-top img {
    width: 100%;
  }
</style>